<template>
  <div class="page-container">
    <div class="in-container">
      <AppSearchForm @submit="search()" @reset="reset()">
        <el-form-item>
          <el-input
            v-model="state.query.name"
            clearable
            placeholder="输入港口名称"
            style="width: 250px"
          />
        </el-form-item>
      </AppSearchForm>
      <div class="btn-area">
        <el-button @click="openDialog" type="primary"> 新增 </el-button>
        <el-button
          @click="exportFile"
          type="primary"
          v-hasPermi="'basePortCreate'"
        >
          EXCEL导出
        </el-button>
        <el-button @click="deleteSelectData" type="danger"> 删除 </el-button>
      </div>
      <AppPageTable
        stripe
        :data="state.tableData.data"
        @change="getList()"
        :option="state.tableData.option"
        class="table"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          width="40"
          fixed="left"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          width="140"
          prop="nameCh"
          label="中文名称"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          width="100"
          prop="portCode"
          label="港口代码"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="nameEn"
          width="200"
          label="英文名称"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="portAirCode"
          width="100"
          label="空港三字码"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="country"
          width="100"
          label="国家"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="lineName"
          width="100"
          label="航线"
        />

        <el-table-column
          prop="isBasePort"
          width="100"
          label="是否基本港"
        >
          <template #default="scope">
            {{ scope.row.isBasePort?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isSeaPort"
          width="100"
          label="是否海运港"
        >
          <template #default="scope">
            {{ scope.row.isSeaPort?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isAirPort"
          width="100"
          label="是否空运港"
        >
          <template #default="scope">
            {{ scope.row.isAirPort?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isOperationPort"
          width="100"
          label="是否操作港"
        >
          <template #default="scope">
            {{ scope.row.isOperationPort?'是':'否' }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button
              @click.stop="update(scope.row)"
              type="primary"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定删除本条数据吗？"
              @confirm="deleteData(scope.row)"
            >
              <template #reference>
                <el-button type="danger"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </AppPageTable>
      <el-dialog
        :title="state.dialogData.title"
        v-model="state.dialogData.show"
        width="500px"
      >
        <el-form
          :model="state.formData"
          :rules="state.formRules"
          label-width="80px"
          ref="form"
        >
          <el-form-item prop="portCode" label="港口代码">
            <el-input v-model="state.formData.portCode"></el-input>
          </el-form-item>
          <el-form-item prop="nameCh" label="中文名称">
            <el-input v-model="state.formData.nameCh"></el-input>
          </el-form-item>
          <el-form-item prop="nameEn" label="英文名称">
            <el-input v-model="state.formData.nameEn"></el-input>
          </el-form-item>
          <el-form-item prop="portAirCode" label="空港三字码">
            <el-input v-model="state.formData.portAirCode"></el-input>
          </el-form-item>
          <el-form-item prop="country" label="所属别国">
            <el-select
              v-model="state.formData.country"
              filterable
              remote
              reserve-keyword
              placeholder="输入字符搜索"
              :remote-method="nationSelect"
              :loading="state.selectLoading"
              style="width: 100%"
            >
              <el-option
                v-for="item in state.selectOptions"
                :key="item.id"
                :label="item.countryCh"
                :value="item.countryCh"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="lineId" label="所属航线">
            <el-select
              v-model="state.formData.lineId"
              filterable
              remote
              reserve-keyword
              placeholder="输入字符搜索"
              :remote-method="lineSelect"
              :loading="state.selectLoading"
              style="width: 100%"
              @change="lineChange"
            >
              <el-option
                v-for="item in state.lineOptions"
                :key="item.id"
                :label="item.nameCh"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="isBasePort"
            label="是否基本港"
          >
            <el-radio-group
             v-model="state.formData.isBasePort"
             >
              <el-radio :label="true">有效</el-radio>
              <el-radio :label="false">无效</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            prop="isBasePort"
            label="是否海运港"
          >
            <el-radio-group
             v-model="state.formData.isSeaPort"
             >
              <el-radio :label="true">有效</el-radio>
              <el-radio :label="false">无效</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            prop="isBasePort"
            label="是否空运港"
          >
            <el-radio-group
             v-model="state.formData.isAirPort"
             >
              <el-radio :label="true">有效</el-radio>
              <el-radio :label="false">无效</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            prop="isBasePort"
            label="是否操作港"
          >
            <el-radio-group
             v-model="state.formData.isOperationPort"
             >
              <el-radio :label="true">有效</el-radio>
              <el-radio :label="false">无效</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel" link>取消</el-button>
            <el-button type="primary" @click="submit"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  watch,
  computed,
  reactive,
  nextTick,
  defineEmits,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/public/request";

import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import AppTitleBox from "@/components/AppTitleBox.vue";
import { fileDownload } from "@/public/publicUtils";

const state = reactive({
  query: {
    name: "",
  },
  tableData: {
    data: [],
    option: useTableOption(),
  },
  dialogData: {
    show: false,
    title: "",
    btnLoading: false,
  },
  formData: {
    portCode: "",// 港口代码
    nameCh: "",// 港口中文名称
    nameEn: "",// 港口英文名称
    country: "",// 所属国家
    lineId: "",// 所属航线
    lineName: "",
    portAirCode: "",// 空港三字码
    isBasePort: false,// 是否基本港
    isSeaPort: false,// 是否海运港口
    isAirPort: false,// 是否空运港口
    isOperationPort: false// 是否操作港
  },
  formRules: {
    portCode: [{ required: true, message: "请输入港口代码", trigger: "blur" }],
    nameCh: [{ required: true, message: "请输入中文名称", trigger: "blur" }],
    nameEn: [
      { required: true, message: "请输入英文名称", trigger: "blur" },
    ],
  },
  selectLoading: false,
  selectOptions: [],
  lineOptions: []
});

const exportFile = () => {
  fileDownload("/api/base/port/download", this.query, "城市港口")
    .then(() => {})
    .catch((err) => {
      ElMessage.warning("文件导出失败");
    });
};
const getList = () => {
  state.tableData.option.loading = true;
  request
    .get("/api/csport/querypage", {
      KeyWords: state.query.name,
      PageIndex: state.tableData.option.page,
      PageSize: state.tableData.option.pageSize,
    })
    .then((res) => {
      state.tableData.data = res.content;
      state.tableData.option.total = res.totalElements;
    })
    .finally(() => {
      state.tableData.option.loading = false;
    });
};
const search = () => {
  state.tableData.option.page = 1;
  state.tableData.pageSize = 10;
  getList();
};
const reset = () => {
  state.query.name = "";
  state.tableData.option.page = 1;
  state.tableData.pageSize = 10;
  getList();
};
const update = (data) => {
  state.formData = JSON.parse(JSON.stringify(data));
  state.dialogData.title = "编辑港口";
  state.dialogData.show = true;
};
const deleteData = (data) => {
  request
    .post("/api/csport/delete", {
      idArray: [data.id],
    })
    .then((res) => {
      if (res.status) {
        ElMessage.success(res.message);
        getList();
      } else {
        ElMessage.error(res.message);
      }
    });
};
const openDialog = () => {
  state.dialogData.title = "新增港口";
  state.dialogData.show = true;
};
const form = ref();
const submit = async () => {
  state.dialogData.btnLoading = true;
  let url = "";
  if (state.formData.id) {
    url = "/api/csport/update";
  } else {
    url = "/api/csport/create";
  }
  await form.value.validate();
  request.post(url, state.formData).then((res) => {
    if (res.status) {
      ElMessage.success(res.message);
      getList();
      state.dialogData.show = false;
    } else {
      ElMessage.error(res.message);
    }
    state.dialogData.btnLoading = false;
  });
};
const cancel = () => {
  state.dialogData.show = false;
};
const nationSelect = (query) => {
  state.selectLoading = true;
  request
    .get("/api/cscountry/querypage", {
      KeyWords: query,
      PageIndex: 1,
      PageSize: 50,
    })
    .then((res) => {
      state.selectOptions = res.content;
    })
    .finally(() => {
      state.selectLoading = false;
    });
};
const lineSelect = (query) => {
  state.selectLoading = true;
  request
    .get("/api/csportroute/querypage", {
      KeyWords: query,
      PageIndex: 1,
      PageSize: 50,
    })
    .then((res) => {
      state.lineOptions = res.content;
    })
    .finally(() => {
      state.selectLoading = false;
    });
}
const lineChange = (val) => {
  if(!val) {
    state.formData.lineName = "";
  }
  var arr = state.lineOptions.filter(item => {
    return item.id == val
  })
  state.formData.lineName = arr[0].nameCh;
}
/**
 * 多项删除业务
 */
const deleteSelectData = () => {
  let deleteSelectArray = [];
  state.tableData.option.selected.forEach((t) => deleteSelectArray.push(t.id));
  ElMessageBox.confirm("确定删除所选信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      request
        .post("/api/csport/delete", {
          idArray: deleteSelectArray,
        })
        .then((res) => {
          if (res.status) {
            ElMessage.success(res.message);
            getList();
          } else {
            ElMessage.error(res.message);
          }
        });
    })
    .catch(() => {
      ElMessage.info("取消删除");
    });
};

watch(
  () => state.dialogData.show,
  (newVal) => {
    if (!newVal) {
      state.formData = {
        portCode: "",
        nameCh: "",
        nameEn: "",
        country: "",
        lineId: "",
        lineName: "",
        portAirCode: "",
        isBasePort: false,
        isSeaPort: false,
        isAirPort: false,
        isOperationPort: false
      };
      nextTick(() => {
        form.value.clearValidate();
      });
    }
  }
);

onMounted(() => {
  getList();
  nationSelect("");
  lineSelect("");
});
</script>

<style lang="scss" scoped>
.btn-area {
  margin-bottom: 8px;
}

.in-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .table {
    flex: 1;
  }
}
</style>
